<template>
  <div class="footer">
    <template v-if="type == 'list'">
      <button type="button" class="handleBtn" :class="btnType" @click="handleClick">{{btnText}}</button>
    </template>
    <template v-else>
      <div class="info">
        <p>
          <span class="gray">共{{item.total_number}}件</span>
          <span class=black>小计</span>
          <span class="red">￥{{item.total_number * item.goods_info.price}}</span>
        </p>
      </div>
    </template>
  </div>
</template>

<script>
import api from "../../api";
export default {
  props: ["item", "type"],
  data() {
    return {};
  },
  computed: {
    btnType() {
      switch (this.item.status) {
        case 1:
          return `blue`;
          break;
        default:
          return `gray`;
          break;
      }
    },
    btnText() {
      switch (this.item.status) {
        case 1:
          return `查看订单`;
          break;
        default:
          return `删除订单`;
          break;
      }
    }
  },
  methods: {
    handleClick() {
      let that = this;
      switch (this.item.status) {
        case 1:
          this.$routerPush(
            this,
            `/pages/order/Detail?id=${this.item.order_sn}`
          );

          break;
        default:
          this.$dialog
            .confirm({
              title: `提示`,
              message: "确定删除当前订单吗？"
            })
            .then(() => {
              api.order.orderDel(this.item.order_sn, res => {
                this.$toast.success({
                  message: `删除成功`,
                  duration: 2000,
                  onClose() {
                    that.$emit('reload')
                  }
                })
              });
            })
            .catch(() => {
              console.log("关闭");
            });
          break;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.footer {
  display: flex;
  padding: 4vw;
  justify-content: flex-end;
  .info {
    font-size: 3.8vw;
  }
  .gray {
    color: #999
  }
  .black {
    color: #333
  }
  .red {
    color: #ff3b30
  }
}
</style>